<template>
  <div class="Signup">
    <!-- 注册信息表单 -->
    <el-form
      :model="Info"
      :rules="rules"
      ref="Info"
      class="demo-Info"
      label-width="100px"
    >
      <el-form-item>
        <h2 class="title" style="">新用户注册</h2>
      </el-form-item>
      <el-form-item prop="username" label="账户名" required>
        <el-input v-model="Info.username" placeholder="账户名"></el-input>
      </el-form-item>
      <el-form-item prop="password" label="密码" required>
        <el-input
          v-model="Info.password"
          placeholder="密码"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item prop="password2" label="确认密码" required>
        <el-input
          v-model="Info.password2"
          placeholder="确认密码"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item prop="id" label="身份证号" required>
        <el-input v-model="Info.id" placeholder="身份证号"></el-input>
      </el-form-item>
      <el-form-item prop="name" label="姓名" required>
        <el-input v-model="Info.name" placeholder="姓名"></el-input>
      </el-form-item>

      <el-form-item label="性别" required>
        <el-radio-group v-model="Info.sex">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item prop="age" label="年龄" required>
        <el-input v-model.number="Info.age" placeholder="年龄"></el-input>
      </el-form-item>
      <el-form-item prop="roomnumber" label="房间号" required>
        <el-input
          v-model="Info.roomnumber"
          placeholder="房间号"
        ></el-input>
      </el-form-item>
      <el-form-item prop="corridornumber" label="楼栋号" required>
        <el-input
          v-model="Info.corridornumber"
          placeholder="楼栋号"
        ></el-input>
      </el-form-item>
      <el-form-item prop="telephone" label="联系电话" required>
        <el-input
          v-model="Info.telephone"
          placeholder="联系电话"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="subForm('Info')"
          style="margin-right: 0px;"
          >立即注册</el-button
        >

        <el-button @click="resetForm('Info')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Signup",
  //返回新生成的组件相关数据
  data() {
    //密码验证规则，保证两次输入的内容一致
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.Info.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      Info: {
        username: "",
        password: "",
        password2: "",
        id: "",
        name: "",
        sex: "",
        age: "",
        roomnumber: "",
        corridornumber: "",
        telephone: "",
      },
      //定义表单验证规则
      rules: {
        username: [
          { required: true, message: "请输入账户名", trigger: "blur" },
          {
            min: 5,
            max: 20,
            message: "长度大于5个字符并小于 20个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 8, message: "长度大于8个字符", trigger: "blur" },
        ],
        password2: [
          { required: true, message: "请确认密码", trigger: "blur" },
          { validator: validatePass, trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        id: [
          {
            required: true,
            message: "请输入身份证ID",
            trigger: "blur",
          },
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: "你的身份证格式不正确",
          },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        age: [
          { required: true, message: "年龄不能为空", trigger: "blur" },
          { type: "number", message: "年龄必须为数字值", trigger: "blur" },
        ],
        roomnumber: [
          { required: true, message: "请输入房间号", trigger: "blur" },
          {
            pattern: /^\d{3}$/,
            message: "房间号格式不正确",
            trigger: "blur",
          },
        ],
        corridornumber: [
          { required: true, message: "请输入楼栋号", trigger: "blur" },
          {
            pattern: /^\d{2}$/,
            message: "楼栋号格式不正确",
            trigger: "blur",
          },
        ],
        telephone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
            message: "手机号码格式不正确",
            trigger: "blur",
          },
        ],
      },
    };
  },
  //前端测试路由拦截器，查看发送的请求正确与否
  /*mounted(){
  		this.axios.interceptors.request.use(config => {
  			console.log(config)
  			return config
  		},error =>{
  			return Promise.reject(error)
  		})
  	},*/
  methods: {
    //提交注册信息组件
    subForm(info) {
      //判断输入的数据是否符合表单规则
      this.$refs[info].validate((valid) => {
        if (valid) {
          //向后端传送请求查看当前用户名是否被使用
          if(this.Info.sex == "男")
            this.Info.sex = 0;
          else
            this.Info.sex = 1;
          this.$axios
            .post("/api/register/properietor", this.Info)
            .then((response) => {
              console.log(response);
              alert("注册成功");
              //跳转至登录界面
              this.$router.push({ name: "Signin", path: "/Signin" });
            })
            .catch((error) => {
              // alert("注册失败，密码需要同时包含数字和字母"); //错误提示
              console.log(error);
            });
        } else {
          console.log("error!");
          return false;
        }
      });
    },
    //刷新用户输入表单
    resetForm(info) {
      this.$refs[info].resetFields();
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 这里是个人信息的相关css表 */

/*则侧表单样式*/
.Signup {
  display: flex;
  justify-content: center;
}

/*详细信息样式*/
.demo-Info {
  text-align: center;
  width: 450px;
}
</style>
